Categories
Modern JavaScript

Best of Modern JavaScript — Numbers and Strings

Spread the love

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at the core features of JavaScript.

New Number Methods

Number.parseInt can be used with the new integer literals.

We can pass in the radix, or the base to treat the number as in the 2nd argument.

For instance, we can write:

Number.parseInt('0o8', 8)

and get 0.

Number.parseInt also works with hexadecimal numbers.

For example, we can write:

Number.parseInt('0xF', 16)

and get 15.

Using 0 Instead of 1 with Exponentiation and Logarithm

The Math object comes with new methods to let us compute natural logarithms.

We can use the Math.expm1(x) method calculate Math.exp(x) — 1 .

So we can write:

Math.expm1(10)

and get 22025.465794806718.

There’s also a method that’s the inverse of Math.expm1 , which is Math.log1p(x) .

It’s the same as Math.log(1 + x) .

For instance, if we have:

Math.log1p(0)

Then we get 0.

Logarithms to Base 2 and 10

We have the Math.log2(x) which calculates the logarithm with base 2.

For example, we can write:

Math.log2(8)

which returns 3.

The Math.log10(x) method returns the log of x with base 10.

For example, if we write:

Math.log10(1000)

then we get 3.

String Features

ES6 comes with some handy string features.

It comes with template literals, which lets us interpolate expressions into a string instead of concatenating strings with other expressions.

For example, we can write:

const firstName = 'james';
const lastName = 'smith';
console.log(`Hello ${firstName} ${lastName}!`);

Then we get 'Hello james smith!’ .

They’re delimited by backticks instead of single or double-quotes.

They can also span multiple lines unlike regular string literals.

For example, we can write:

const multiLine = `
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="theme-color" content="#000000">
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 <title>React App</title>
</head>

<body>
 <div id="root"></div>
</body>

</html>`;

And the HTML string will span multiple lines.

Code Point Escapes

ES6 lets us escape any code points, even though they are beyond 16 bits.

For example, we can write:

console.log('u{1F680}');

to escape 1F680 , which is beyond the 16-bit limit.

Iterating Over Strings

String are iterable objects.

Therefore, we can loop through them with the for-of loop.

For example, we can write:

for (const ch of 'abc123') {
  console.log(ch);
}

Then we get the characters logged as they’re being looped through.

The for-of loop splits the string along code point boundaries, so the string it returns can return 1 or 2 characters.

For example, if we have:

for (const ch of 'xuD83DuDC69') {
  console.log(ch.length);
}

Then ch will be 1 for the first character and 2 for the 2nd.

We can use the spread operator to split the string along the code points into an array and use the length property to get the length.

For example, we can write:

[...'xuD83DuDC69'].length

and we get 2.

Conclusion

ES6 introduced many number and string features that we may have missed.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *